<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理系统</title>
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style type="text/css">
        body {
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        .card-container {
            padding: 20px;
        }

        .layui-card {
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .layui-card-header {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
            height: 50px;
            line-height: 50px;
        }

        .layui-badge-dot {
            background-color: #1E9FFF;
        }

        .search-form .layui-form-label {
            width: 80px;
            text-align: left;
            padding-left: 0;
        }

        .search-form .layui-input-block {
            margin-left: 80px;
        }

        .table-container {
            margin: 20px;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式优化 */
        .layui-table {
            width: 100%;
        }

        .layui-table td, .layui-table th {
            padding: 12px 15px;
            vertical-align: middle;
        }

        .layui-table th {
            font-weight: 500;
            background-color: #f8f8f8;
        }

        .layui-table-cell {
            height: auto;
            min-height: 36px;
            line-height: 1.5;
            padding: 8px 12px;
            overflow: visible;
        }

        .layui-table-box {
            overflow: visible;
        }

        /* 调整后的列宽设置 - 重点修改部分 */
        .layui-table colgroup col:nth-child(1) { width: 25px; }  /* ID - 变小 */
        .layui-table colgroup col:nth-child(2) { width: 40px; }  /* 姓名 - 变小 */
        .layui-table colgroup col:nth-child(3) { width: 50px; }  /* 性别 - 变小 */
        .layui-table colgroup col:nth-child(4) { width: 110px; } /* 电话 */
        .layui-table colgroup col:nth-child(5) { width: 250px; } /* 邮箱 - 变大 */
        .layui-table colgroup col:nth-child(6) { width: 80px; }  /* 学历 */
        .layui-table colgroup col:nth-child(7) { width: 300px; } /* 身份证 - 变大 */
        .layui-table colgroup col:nth-child(8) { width: 100px; } /* 职位 */
        .layui-table colgroup col:nth-child(9) { width: 100px; } /* 部门 */
        .layui-table colgroup col:nth-child(10) { width: 150px; } /* 创建时间 */
        .layui-table colgroup col:nth-child(11) { width: 150px; } /* 操作 */

        .layui-table-tool {
            background-color: transparent;
            border-bottom: 1px solid #f0f0f0;
        }

        .layui-table-tool-temp {
            padding: 15px 0;
        }

        .layui-table-page {
            padding: 15px 0;
            text-align: center;
        }

        .layui-table select {
            height: 30px;
            line-height: 30px;
            border-radius: 2px;
            border: 1px solid #e6e6e6;
            width: 100%;
        }

        .layui-badge {
            margin-right: 5px;
        }

        .layui-btn-xs {
            padding: 0 8px;
            font-size: 12px;
        }
    </style>
</head>
<body>

<!-- 卡片搜索面板-->
<div class="card-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-badge-dot"></span>
                    <span>员工搜索</span>
                </div>
                <div class="layui-card-body search-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input id="search-input-name" type="text" name="title" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input id="search-input-phone" type="text" name="title" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">身份证</label>
                            <div class="layui-input-inline">
                                <input id="search-input-idcard" type="text" name="title" placeholder="请输入身份证" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" id="search-btn">搜索</button>
                            <button class="layui-btn layui-btn-primary" id="reset-btn">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 表格区域 -->
<div class="table-container">
    <table class="layui-hide" id="employee-table" lay-filter="employee-table"></table>
</div>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="addEmployee">
            <i class="layui-icon layui-icon-add-1"></i> 添加员工
        </button>
    </div>
</script>

<!-- 操作列模板 -->
<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
        <i class="layui-icon layui-icon-ok"></i>保存
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<!-- 职位下拉模板 -->
<script type="text/html" id="positionTpl">
    <select id="position-select" name="position" lay-verify="required" class="layui-select">
        <#if positionList?? && positionList?size gt 0>
            <#list positionList as position>
                <option value=${position.id}
                        {{#if (d.position.id == ${position.id}) { }}
                        selected
                        {{# }}}
                >
                    ${position.name}</option>
            </#list>
        </#if>
    </select>
</script>

<!-- 部门下拉模板 -->
<script type="text/html" id="departmentTpl">
    <select id="department-select" name="department" lay-verify="required" class="layui-select">
        <#if departmentList?? && departmentList?size gt 0>
            <#list departmentList as department>
                <option value=${department.id}
                        {{#if (d.department.id == ${department.id}) { }}
                        selected
                        {{# }}}
                >
                    ${department.name}</option>
            </#list>
        </#if>
    </select>
</script>

<!-- 学历下拉模板 -->
<script type="text/html" id="educationTpl">
    <select id="education-select" name="city" lay-verify="required" class="layui-select">
        <#list ["本科", "硕士", "博士"] as education>
            <option value=${education_index}
                    {{#if (d.education == ${education_index?c}) { }}
                    selected
                    {{# }}}
            >
                ${education}</option>
        </#list>
    </select>
</script>

<script>
    var tableContent = [];
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;

        // 渲染表格
        table.render({
            elem: '#employee-table',
            url: '/employees',
            toolbar: '#toolbar',
            parseData: function (res) {
                console.log(res);
                tableContent = res.data;
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.size,
                    data: res.data
                }
            },
            cols: [[
                {field: 'id', title: 'ID', sort: true},
                {field: 'name', title: '姓名'},
                {field: 'sex', title: '性别', templet: function (row) {
                        return [
                            '<div>',
                            row.sex == 0 ? '<span class="layui-badge layui-bg-blue">男</span>' : '<span class="layui-badge layui-bg-orange">女</span>',
                            '</div>'
                        ].join('');
                    }},
                {field: 'phone', title: '电话', edit: true},
                {field: 'email', title: '邮箱', edit: true},
                {field: 'education', title: '学历', templet: '#educationTpl'},
                {field: 'idcard', title: '身份证', edit: true},
                {field: 'position.name', title: '职位', templet: '#positionTpl'},
                {field: 'department.name', title: '部门', templet: '#departmentTpl'},
                {field: 'createdTime', title: '创建时间', sort: true},
                {fixed: 'right', title: '操作', align: 'center', toolbar: '#barTpl'}
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50],
            done: function (res, curr, count) {
                // 支持表格内嵌下拉框
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                form.render('select');
            }
        });

        // 搜索按钮事件
        $("#search-btn").on('click', function() {
            searchEmployees();
        });

        // 重置按钮事件
        $("#reset-btn").on('click', function() {
            $("#search-input-name").val('');
            $("#search-input-phone").val('');
            $("#search-input-idcard").val('');
            searchEmployees();
        });

        // 回车键触发搜索
        $(".search-form input").keydown(function(e) {
            if (e.keyCode == 13) {
                searchEmployees();
            }
        });

        // 搜索函数
        function searchEmployees() {
            var whereData = {};
            var qname = $("#search-input-name").val();
            var qphone = $("#search-input-phone").val();
            var qidcard = $("#search-input-idcard").val();

            if (qname.length > 0) whereData["qname"] = qname;
            if (qphone.length > 0) whereData["qphone"] = qphone;
            if (qidcard.length > 0) whereData["qidcard"] = qidcard;

            table.reload("employee-table", {
                where: {
                    query: JSON.stringify(whereData)
                },
                page: {
                    curr: 1
                }
            });
        }

        // 工具栏事件
        table.on('toolbar(employee-table)', function (obj) {
            // 回调函数
            layerCallback = function(callbackData) {
                var dataBak = [];
                var tableBak = table.cache['employee-table'];
                for (var i = 0; i < tableBak.length; i++) {
                    dataBak.push(tableBak[i]);
                }
                dataBak.push(callbackData);
                table.reload("employee-table", {
                    data: dataBak
                });
            };

            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            switch(obj.event) {
                case 'addEmployee':
                    layer.open({
                        title: '新建员工',
                        content: 'static/html/layers/employee-insert.html',
                        type: 2,
                        offset: 't',
                        area: ["500px", "600px"],
                        success: function (layero, index) {
                            var iframe = window['layui-layer-iframe' + index];
                            var departments = [];
                            var positions = [];
                            <!-- 向子页面进行数据传递 (下拉框选项, 及主键 -> 不一定连续)-->
                            <#list positionList as position>
                            positions.push({
                                'id' : '${position.id}',
                                'name' : '${position.name}'
                            });
                            </#list>
                            <#list departmentList as department>
                            departments.push({
                                'id' : '${department.id}',
                                'name' : '${department.name}'
                            });
                            </#list>
                            var dataDict = {
                                'positions': positions,
                                'departments': departments
                            };
                            iframe.child(dataDict);
                        }
                    });
                    break;
            }
        });

        // 监听工具条(右侧)
        table.on('tool(employee-table)', function(obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if (layEvent === 'edit') {
                // 发送更新请求
                $.ajax({
                    url: '/employees',
                    method: 'put',
                    data: JSON.stringify({
                        id: data.id,
                        phone: data.phone,
                        email: data.email,
                        education: $("#education-select").val(),
                        idcard: data.idcard,
                        address: data.address,
                        positionId: $("#position-select").val(),
                        departmentId: $("#department-select").val()
                    }),
                    contentType: "application/json",
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg('更改员工信息成功', {icon: 1});
                            obj.update({
                                phone: data.phone,
                                email: data.email,
                                idcard: data.idcard,
                                address: data.address
                            });
                        } else {
                            layer.msg('更改员工信息失败', {icon: 2});
                        }
                    }
                });
            } else if (layEvent == 'del') {
                layer.confirm('确定要删除员工 ' + data.name + ' 吗？', {
                    icon: 3,
                    title: '删除确认',
                    btn: ['确定', '取消']
                }, function(index) {
                    obj.del();
                    layer.close(index);
                    // 向服务端发送删除指令
                    $.ajax({
                        url: '/employees/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg('删除成功', {icon: 1});
                            } else {
                                layer.msg('删除失败', {icon: 2});
                                table.reload("employee-table");
                            }
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>